<template>
  <div class="news">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
      <el-tab-pane v-for="item in type" :key="item[1]" :label="item[0]" :name="item[1]">
        <el-card v-for="item1 in newsList" :key="item1.uniquekey" class="box-card mb12">
          <template #header>
            <div class="card-header flex f-sb">
              <div class="link" @click="handleDetail(item1.url)">
                <div class="fwb title">
                  {{ item1.title }}
                </div>
                <div class="c606">
                  {{ item1.date }}
                </div>
              </div>
              <div>
                <span class="mr12">{{ item1.category }}</span>
                <span>【{{ item1.author_name }}】</span>
              </div>
            </div>
          </template>
          <div>
            <!-- <img :src="item1?.thumbnail_pic_s" alt="暂无图片"> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="item1.thumbnail_pic_s"
              :zoom-rate="1.2"
              :preview-src-list="[item1.thumbnail_pic_s]"
              :initial-index="1"
              fit="cover"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- <div v-for="item in demoList" :key="item">
    {{ item }}
  </div>
  <el-button @click="handlea">点击</el-button> -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
// import ajax from "@/utils/ajax"
import axios from 'axios'
import { ResponseType, ResData } from '@/utils/common'
import { newData, news } from './index'
import { type } from './config'

const activeName = ref('top')
const handleChange = (val: string) => {
    activeName.value = val
    handleGetNewList(val)
}
const newsList = ref<newData[]>([])
const handleGetNewList = async (type: string) => {
    const res: ResData<ResponseType<news>> = await axios.get('news/toutiao/index', { params: { key: '7d4be87c31557c33cc6623f3d9bd109d', type } })
    if (res.status === 200) {
        newsList.value = res.data.result?.data
    }
}
const handleDetail = (url: string) => {
    window.open(url, '_blank')
}
const demoList = ref([1, 2, 3])
const handlea = () => {
    demoList.value[0] = 8
}
onMounted(async () => {
    handleGetNewList(activeName.value)
})
</script>

<style lang="less" scoped>
.news {
  .title {
    // color: @main-color;
  }
}
</style>
